<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="/webjars/jquery/3.4.1/jquery.js"></script>
<script>
    window.onload=function(){
        if ('WebSocket' in window) {
            console.log("浏览器支持Websocket")
            //websocket = new WebSocket("ws://127.0.0.1:8090/websocket");
            websocket = new WebSocket("ws://101.132.252.19:8070/websocket");
        } else {
            console.log('当前浏览器 Not support websocket')
        }

        //连接发生错误的回调方法
        websocket.onerror = function() {
            alert("WebSocket连接发生错误")
        };

        //连接成功建立的回调方法
        websocket.onopen = function() {
            console.log("WebSocket连接成功")
        }

        //接收到消息的回调方法
        websocket.onmessage = function(event) {
            var parse = JSON.parse(event.data);
            console.log(parse);
            $("#sn").text(parse.sn);
            $("#timeStamp").text(parse.timeStamp);
            $("#breathing").text(parse.breathing);
            $("#heart").text(parse.heart);
            $("#heartWave").text(parse.heartWave);
            $("#breatheWave").text(parse.breatheWave);

            var size = parse.size;
            parse.facingMode
            // alert("这是后台推送的消息："+event.data);
        }

        //连接关闭的回调方法
        websocket.onclose = function() {

        }

        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function() {
            closeWebSocket();
        }

        //关闭WebSocket连接
        function closeWebSocket() {
            websocket.close();
        }
    }

</script>
<body>
<div>欢迎登录,测试Demo</div>
<!--目前的用户是:<div id="id" th:text="${sn}"></div>-->
<!--目前的modId是:<div id="modId" th:text="${modId}"></div>-->
<table border="1px solid black">
    <tr>
        <th>sn</th>
        <th>timeStamp</th>
        <th>breathing</th>
        <th>heart</th>
        <th>heartWave</th>
        <th>breatheWave</th>
    </tr>

    <tr>
        <td id="sn">4142451</td>
        <td id="timeStamp">1</td>
        <td id="breathing">1</td>
        <td id="heart">1</td>
        <td id="heartWave">1</td>
        <td id="breatheWave">1</td>
    </tr>
</table>

</body>
</html>